<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-我的</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=070417" />
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
	</head>
	<style>
		.userIndex .content .user_top{position: relative;}
		.userLevelText{font-size:.5rem;color:#705135;padding:2px 5px;border-radius:1rem;background:#FBDDBA;position: absolute;right:.6rem;top:.6rem;}
		.userIndex .content .user_top .user_share{margin-top: .3rem;}
		.userIndex .content .user_top .user_share p{font-size:.5rem;}
		.userIndex .content .user_top .user_share img{width:.68rem;height:.68rem;margin-left: .4rem;border-radius: 0;margin-bottom: 0;}
	</style>
	<body>
		<!-- 个人中心 --> 
		<div class="userIndex">
			<div class="content">
				<!-- 顶部头像快 -->
				<div class="user_top">
					<img src="{$meminfo['logo']}" alt="">
					<h3>{$meminfo['nickname']}</h3>
					<!-- <p>ID:{$meminfo['member_id']}</p> -->
					<div class="user_share flex juscenter"><p>邀请码：<i id="_order_umber">{$meminfo['invite']}</i></p><img src="__TMPL__/home/public/assets/img/copy_1.png" alt="" id="copyOrderNum"></div>
					
					<if condition="$meminfo.grade eq 1">
							<div class="userLevelText">普通会员</div>
						<elseif condition="$meminfo.grade eq 2"/>
							<div class="userLevelText">顾问</div>
						<elseif condition="$meminfo.grade eq 3"/>
							<div class="userLevelText">星级顾问</div>
						<elseif condition="$meminfo.grade eq 4"/>
							<div class="userLevelText">联合创始人</div>
						</if>
				</div>

				<!-- tab列表 -->
				<div class="tab_list">
					<div class="upgrade flex juscbtween">
						<img class="upgradeImg" src="__TMPL__/home/public/assets/img/user/upgrade.png" alt="">
						<p>升级顾问，育儿赚钱两不误</p>
						<a class="look_more flex alitemCenter" href="./grade">
							<span>查看</span>
							<img src="__TMPL__/home/public/assets/img/user/right.png" alt="">
						</a>
					</div>
					<div class="itemBox">
						<a class="tab_item flex juscbtween" href="./order">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon1.png" alt="">
								<span>我的订单</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
						<a class="tab_item flex juscbtween" href="/wallet">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon2.png" alt="">
								<span>我的钱包</span>
							</div>
							<div class="right flex alitemCenter">
								<span>￥{$meminfo['money']}</span>
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
					</div>
					<div class="itemBox">
						<a class="tab_item flex juscbtween" href="/my_team">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/a3.png" alt="">
								<span>我的团队</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>

						<a class="tab_item flex juscbtween" href="/member_award">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/a1.png" alt="">
								<span>推广收益</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>

						<!--<a class="tab_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/a2.png" alt="">
								<span>成长学院</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>-->


						<a class="tab_item flex juscbtween" href="javascript:;" id="shareMaskShow">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/a2.png" alt="">
								<span>邀请好友</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>


						<!--<a class="tab_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon3.png" alt="">
								<span>我的积分</span>
							</div>
							<div class="right flex alitemCenter">
								<span>￥2</span>
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
						-->
					</div>
					<!--<div class="itemBox">
						<a class="tab_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon4.png" alt="">
								<span>消息</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="./img/right.png" alt="">
							</div>
						</a>
						<a class="tab_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon5.png" alt="">
								<span>我的邀请码</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
					</div>-->
					<div class="itemBox">
						<!--<a class="tab_item flex juscbtween" href="https://www.yuque.com/books/share/3c722c22-6ab5-47c9-a6ae-75c57f808970">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon6.png" alt="">
								<span>用户手册</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>-->
						<a class="tab_item flex juscbtween" href="{:url('/user_set')}">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/user/icon7.png" alt="">
								<span>设置</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
					</div>
				</div>
			</div>
			<div id="bottmm" class="flex juscbtween">
				<a href="{:url('Index/index')}" class="foot_item">
					<img src="__TMPL__/home/public/assets/img/foot/one.png" alt="">
					<p>选课</p>
				</a>
				<!-- <a class="foot_item">
					<img src="./img/foot/two.png" alt="">
					<p>学习</p>
				</a> -->
				<a href="{:url('member/index')}" class="foot_item on">
					<img src="__TMPL__/home/public/assets/img/foot/threeSelect.png" alt="">
					<p>我的</p>
				</a>
			</div>

			<div class="inviteFriendMask close">
				<div class="tipTextBox">
					<div class="inviteFriendBox bubbling" id="inviteFriendBox">
						<img src="" alt="" id="backgroundImg">
						<div class="userInfo flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="" alt="" id="userHead">
								<div class="info flex flexdirection">
									<h3 class="userName"></h3>
									<p>邀请您一起育儿育己~</p>
									<!-- <span class="inviteCode" style="white-space: nowrap">邀请码：<i id="inviteCode"></i></span> -->
								</div>
							</div>
							<div class="right">
								<img src="" alt="" id="userCode">
							</div>
						</div>
					</div>
					<div class="tipText">长按海报保存至手机</div>
				</div>
			</div>
			<div class="shareMask close">
				<div class="shareBox flex juscbtween bubbling">
					<div class="shareitem shareUrlButton">
						<img src="__TMPL__/home/public/assets/img/shareUrl.png" alt="">
						<p>分享链接</p>
					</div>
					<div class="shareitem" id="inviteShareButton">
						<img src="__TMPL__/home/public/assets/img/shareDown.png" alt="">
						<p>生成海报</p>
					</div>
				</div>
			</div>
			<!-- 引导分享 -->
			<div class="yindaoShareMask close">
				<img src="__TMPL__/home/public/assets/img/yindaoShareImg.png" alt="">
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			//获取海报信息
			function getUserInfo(){
				$.ajax({
					url: '/fx/invite_info',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = res.data;
						headImg = data.logo;
						$('#backgroundImg').attr('src',data.beijing);
						$('#userHead').attr('src',data.logo);
						$('.userName').html(characterLength(data.nickname,4));
						// $('#inviteCode').html(data.invite);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
				$.ajax({
					url: '/fx/invite_code',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = 'data:image/png;base64,'+res.data;
						$('#userCode').attr('src',data);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
			}
			setTimeout(function(){
				getUserInfo();
			},500)
			$('#shareMaskShow').click(function(){
				$('.shareMask').show();
			})
            $('#inviteShareButton').click(function(){
            	$('.shareMask').hide();
    //         	layer.msg('正在生成海报', {
				//   icon: 16,
				//   shade: .5,
				//   time:200
				// });
			    $('.inviteFriendMask').show();
            	html2canvas($(".inviteFriendBox")[0],{useCORS:true,scrollY: 0,scrollX: 0}).then(function (canvas) {
			        dataURL =canvas.toDataURL("image/png");
			        console.log(dataURL)
			        $("#inviteFriendBox").html("<img src='"+dataURL+"' style='display:block; width:100%;height:100%' />");
			    });
            })

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }

			//隐藏所有弹框
			$('.close').click(function(){
				// $('#userHead').attr('src',headImg);
				$('.bindInvitionMask').hide();
				$('.contactMask').hide();
				$('.inviteFriendMask').hide();
				$('.yindaoShareMask').hide();
				$('.shareMask').hide();
			})

			$('.shareUrlButton').click(function(){
				$('.yindaoShareMask').show();
			})

			//冒泡，禁止点击
			$('.bubbling').click(function(){
				return false;
			})
			
			//复制邀请码
		   	$('#copyOrderNum').on('click', function () {
			    var val = document.getElementById('_order_umber');
			    window.getSelection().selectAllChildren(val);
			    var copyCode = document.execCommand("Copy");

			    if (copyCode) {
			      layer.msg('复制成功');
			    } else {
			      layer.msg('复制失败');
			    }
			});
		})
	</script>
</html>
